
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import App from './App.vue'
import 'animate.css';
import gsap from 'gsap'
import 'highlight.js/styles/atom-one-dark.css';
import { animateOnScroll } from './directives/animate';
import VueLazyload from 'vue3-lazyload';

import ScrollTrigger from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

const app = createApp(App)

// 配置vue3 - lazyload
app.use(VueLazyload, {
    preLoad: 1.3,
    error: '/src/assets/img-error.jpg',
    loading: '/src/assets/lazy.gif',
    attempt: 1,
    observer: true,
    observerOptions: {
      rootMargin: '0px',
      threshold: 0.1
    }
});


// 引入 ElementPlus
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

// 为了支持 HMR
if (import.meta.hot) {
  import.meta.hot.accept()
}

//加载组件
import loading from './directives/loading'
app.directive('loading', loading)

// 注册自定义指令
app.directive('animate-on-scroll', animateOnScroll);

import ClickOutside from '@/directives/clickOutside'
app.directive('click-outside', ClickOutside)

//图片预览组件
import ImagePreview from '@/components/common/ImagePreview.vue'
app.component('mj-image-preview', ImagePreview)

//表情组件
import EmojiPicker from '@/components/common/EmojiPicker.vue'
app.component('mj-emoji', EmojiPicker)

// 下载 npm i vite-plugin-svg-icons -D
// 下载 npm install fast-glob --save-dev
import 'virtual:svg-icons-register'
// 注册全局组件
import SvgIcon from '@/components/SvgIcon/index.vue'
app.component('svg-icon', SvgIcon)


app.use(ElementPlus);
app.use(router)
app.use(createPinia()) // 安装pinia
app.mount('#app')
